<script lang="tsx">
import type { CSSProperties } from 'vue'
import { defineComponent, nextTick, watch } from 'vue'
import { fileListProps } from './props'
import { isFunction } from '@/utils/is'
import { useModalContext } from '@/components/Modal/src/hooks/useModalContext'

export default defineComponent({
  name: 'FileList',
  props: fileListProps,
  setup(props) {
    const modalFn = useModalContext()
    watch(
      () => props.dataSource,
      () => {
        nextTick(() => {
          modalFn?.redoModalHeight?.()
        })
      },
    )
    return () => {
      const { columns, actionColumn, dataSource } = props
      const columnList = [...columns, actionColumn]
      return (
        <table class="file-table">
          <colgroup>
            {columnList.map((item) => {
              const { width = 0, dataIndex } = item
              const style: CSSProperties = {
                width: `${width}px`,
                minWidth: `${width}px`,
              }
              return <col style={width ? style : {}} key={dataIndex} />
            })}
          </colgroup>
          <thead>
            <tr class="file-table-tr">
              {columnList.map((item) => {
                const { title = '', align = 'center', dataIndex } = item
                return (
                  <th class={['file-table-th', align]} key={dataIndex}>
                    {title}
                  </th>
                )
              })}
            </tr>
          </thead>
          <tbody>
            {dataSource.map((record = {}, index) => {
              return (
                <tr class="file-table-tr" key={`${index + record.name || ''}`}>
                  {columnList.map((item) => {
                    const { dataIndex = '', customRender, align = 'center' } = item
                    const render = customRender && isFunction(customRender)
                    return (
                      <td class={['file-table-td', align]} key={dataIndex}>
                        {render ? customRender?.({ text: record[dataIndex], record }) : record[dataIndex]}
                      </td>
                    )
                  })}
                </tr>
              )
            })}
          </tbody>
        </table>
      )
    }
  },
})
</script>

<style lang="less">
.file-table {
  width: 100%;
  border-collapse: collapse;

  .center {
    text-align: center;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
  }

  &-th,
  &-td {
    padding: 12px 8px;
  }

  thead {
    background-color: @background-color-light;
  }

  table,
  td,
  th {
    border: 1px solid var(--border-color);
  }
}
</style>
